<!--
 * @Author: zjf
 * @Date: 2023-07-18 18:16:15
 * @LastEditors: JenClint
 * @LastEditTime: 2024-01-25 11:33:16
 * @Description:
-->
<template>
	<div class="conent">
		<template v-if="!isHide">
			<template v-if="layer === 'averageTaxPerMu'">
				<span style="font-size:10px">单位：万元/亩</span>
				<div class="perMuLegend">
					<div class="gradient-background"></div>
					<div class="nums">
						<span>0 </span>
						<span>1000000</span>
					</div>
				</div>
			</template>
			<template v-else>
				<div class="conent-item" v-for="item in legendList" :key="item.id" v-show="!isHide">
					<span class="color" :style="{background:item.color}"></span>
					<div class="title">{{item.label}}</div>
				</div>
			</template>
		</template>

		<div class="conent-item btns" @click="isHide = !isHide">
			<span>{{'图例'}}</span>
			<i v-if="isHide" class="el-icon-arrow-up"></i>
			<i v-else class="el-icon-arrow-down"></i>
		</div>
	</div>
</template>

<script>
import unitMap from "../js/unitMap";
export default {
	mixins: [unitMap()],
	props: {
		layer: {
			type: String,
			defalut: 'landUseType'
		}
	},
	data() {
		return {
			list: [
				{ label: '有驾校地块', prop: 'driverschoolland', layer: 'landUseType', num: 0, color: "#B3D6FF" },
				{ label: '有意愿更新建设企业', prop: 'updateland', layer: 'landUseType', num: 0, color: "#88FF4D" },
				{ label: '低效工业地块', prop: 'inefficientindustrialland', layer: 'landUseType', num: 0, color: "#FF4D4D" },
				{ label: '未充分开发', prop: 'idleland', layer: 'landUseType', num: 0, color: "#FDFD4E" },

				{ label: '置换土地', prop: 'replacingland', layer: 'updateMode', num: 0, color: "#00C5FF" },
				// { label: '合作', prop: 'cooperation', layer: 'updateMode', num: 0, color: "#00C5FF" },
				{ label: '回购', prop: 'buyback', layer: 'updateMode', num: 0, color: "#E6E600" },
				{ label: '自主更新', prop: 'autonomousupdates', layer: 'updateMode', num: 0, color: "#FF73DF" },
				{ label: '其他', prop: 'others', layer: 'updateMode', num: 0, color: "#acacac" },

				{ label: '信息登记', prop: 'inforegistration', layer: 'updateProgress', num: 0, color: "#00C5FF" },
				{ label: '奖惩兑现', prop: 'redemption', layer: 'updateProgress', num: 0, color: "#E6E600" },
				{ label: '更新方案确定', prop: 'determination', layer: 'updateProgress', num: 0, color: "#FF73DF" },
				{ label: '更新方案联审', prop: 'jointreview', layer: 'updateProgress', num: 0, color: "#ff843a" },
				{ label: '谈判签约', prop: 'negotiatesign', layer: 'updateProgress', num: 0, color: "#ff5454" },
				{ label: '更新意愿调查', prop: 'investigate', layer: 'updateProgress', num: 0, color: "#FFFF73" },


			],
			isHide: true,
		};
	},
	watch: {},
	computed: {
		legendList() {
			console.log("🏔️ ~  legendList ~  this.layer:", this.layer)
			if (this.layer) {
				const data = this.list.filter(t => t.layer == this.layer)
				return data
			}
			return []
		}
	},
	created() { },
	mounted() {
		this.init()
	},
	methods: {
		init() { },
	}
};
</script>
<style lang="scss" scoped>
.conent {
	padding: 8px 15px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: #fff;
	border-radius: 5px;
	gap: 4px;
	.conent-item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		gap: 10px;
		.color {
			height: 14px;
			width: 14px;
			// object-fit: cover;
			// object-position: top;
		}

		.title {
			min-width: 90px;
		}

		.num {
			width: 40px;
		}
	}
	.btns {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
	}
}
.perMuLegend {
	display: flex;
	flex-direction: row;
	box-sizing: border-box;
	gap: 10px;
	width: 100px;
	height: 100px;
	.gradient-background {
		width: 50px;
		height: 100%;
		background: linear-gradient(
			180deg,
			#f5cfb3 0%,
			#f0bc9c 30%,
			#e69575 50%,
			#cf3729 100%
		);
	}
	.nums {
		width: 50px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 11px;
	}
}
</style>